<template>
  <loading-wrap>
    <div class="card">
      <div class="card-body">
        <div class="d-flex mb-3">
          <h5 class="card-title">法人基本信息</h5>
          <button
            v-if="customerData.project_status === '0' || customerData.project_status === '2'"
            class="btn pt-0 btn-text text-muted"
            @click="edit()"
          >
            <i class="fa fa-edit"></i>
          </button>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">姓名：</div>
          <div class="dl-dd">{{ tableData.real_name || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">身份证：</div>
          <div class="dl-dd">{{ tableData.id_card || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">性别：</div>
          <div class="dl-dd">{{ enumSexType[tableData.sex] || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">学历：</div>
          <div class="dl-dd">{{ enumEduType[tableData.education] || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">联系电话：</div>
          <div class="dl-dd">{{ tableData.mobile_no || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">职位：</div>
          <div class="dl-dd">{{ tableData.positio || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">身份证地址：</div>
          <div class="dl-dd">{{ tableData.address || '-' }}</div>
        </div>

        <div class="dl-wrap">
          <div class="dl-dt">持股比例：</div>
          <div class="dl-dd">{{ tableData.sh_rate | pureUnit('%') }}</div>
        </div>

        <div class="dl-wrap mt-5">
          <div class="dl-dt"></div>
          <div class="dl-dd">
            <button
              v-if="customerData.project_status === '0' || customerData.project_status === '2'"
              class="btn btn-primary"
              @click="edit()"
            >
              <i class="fa fa-edit"></i>
              修改
            </button>
          </div>
        </div>
      </div>
    </div>

    <form-component
      :auto-init="false"
      ref="fc"
      :form-data="formData"
      :table-data="personInfo"
      :table-id="tableId"
      :table-name="tableName"
      :visible.sync="editVisible"
      @success="getData"
    ></form-component>
  </loading-wrap>
</template>
<script>
import FormComponent from '@/components/FormComponent'
import SelectAddress from '@/components/select/SelectAddress'
import { enumSexType, enumEduType } from '@/credit/plugins/enum'

export default {
  components: {
    FormComponent,
  },
  props: {},
  data() {
    return {
      enumSexType,
      enumEduType,
      id: '',
      personInfo: {},
      editVisible: false,
      tableName: 'datum_customer_shareholder',
      tableData: {},
      formData: {
        real_name: { type: 'text', label: '姓名', value: '', required: true },
        id_card: { type: 'text', label: '身份证号码', value: '', validator: 'idCard' },
        sex: {
          type: 'radio',
          label: '性别',
          value: '1',
          inline: true,
          enumType: enumSexType,
          required: true,
        },
        education: {
          type: 'radio',
          label: '学历',
          value: '0',
          inline: true,
          enumType: enumEduType,
        },
        mobile_no: { type: 'text', label: '联系电话', value: '', validator: 'phone' },
        positio: { type: 'text', label: '职位', value: '' },
        address_code: {
          type: 'component',
          label: '所在地区',
          value: '',
          component: SelectAddress,
          attrs: { class: 'form-control-ml' },
        },
        address_detail: { type: 'text', label: '详细地址', value: '' },
        sh_rate: { type: 'number', label: '股权比例', value: '', step: 0.01, unit: ' %', max: 100 },
      },
      tableId: '',
    }
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.query.id || sessionStorage.getItem('customer_related_id')
    this.customerData = JSON.parse(sessionStorage.getItem('customer_related_view'))
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      // _view 将adresscod 和addressdtail合并为address
      this.$api
        .getData('credit', 'datum_customer_shareholder_view', {
          'customer_related_id.eq': this.id,
          'is_corp.eq': '1',
        })
        .then(res => {
          this.tableData = (res && res.data[0]) || []
        })
      this.$api
        .getData('credit', 'datum_customer_shareholder', {
          'customer_related_id.eq': this.id,
          'is_corp.eq': '1',
        })
        .then(res => {
          this.personInfo = (res && res.data[0]) || []
        })
    },
    edit() {
      this.tableId = this.personInfo.datum_customer_shareholder_id
      this.$nextTick(() =>
        this.$refs.fc.setKey('address_code', 'value', this.personInfo.address_code)
      )
      this.editVisible = true
    },
  },
}
</script>
<style scoped lang="scss"></style>
